import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton';
import { View, Image, Text } from '@tarojs/components';
import {AtIcon} from 'taro-ui';
import {newHttp} from "../../utils/request";
import {
	TARO_ENV,
	CUSTOMER_SERVICE,
	GOODS_DETAIL_PRE_ORDER_TT,
	DETAIL_PRE_ORDER_TT
} from '../../constants/api';
import {GetRequest} from '../../utils/tools';
import Float from "../../components/float/float";
import './appointment.scss';

export default class AppointmentBill extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showLoading: true,
			appointmentStatus: "",
			uuid: "",
			preGoodData: {},
			preOrderData: {}
		};
	}

	componentDidMount() {
		Taro.showLoading({
		    title: '请稍等...'
		});
		const { uuid } = Taro.getCurrentInstance().router.params;
		this.setState({ uuid }, () => {
			this.getPreOrderDetail(uuid);
		});
	}
	async componentDidShow() {
		await Taro.setNavigationBarTitle({
            title: '预约单'
        })
	}

	// detail pre order
	async getPreOrderDetail(uuid) {
		const resGood = await newHttp.catchGet(GOODS_DETAIL_PRE_ORDER_TT, { uuid });
		const resOrder = await newHttp.catchGet(DETAIL_PRE_ORDER_TT, { uuid });

		if(resGood) {
			this.setState({ preGoodData: resGood.data });
		}
		if(resOrder) {
			const status = ["预约中","预约成功", "预约失败", "取消预约"]
			this.setState({ preOrderData: resOrder.data });
			if(resOrder.data.deal_status === -1) {
				this.setState({ appointmentStatus: "待预约" });
			}else {
				this.setState({ appointmentStatus: status[resOrder.data.deal_status] });
			}
		}
		Taro.hideLoading();
	}
	// 官方客服
	async callOfficalService() {
		let ret = await newHttp.catchGet(CUSTOMER_SERVICE);
		Taro.setStorageSync('webviewUrl', ret.data);

		let url = '/main/webview/index?notCarryToken=true&url=' + ret;
		Taro.navigateTo({ url });
	}
	// 商家
	contactBusiness() {
		const phone = this.state.preOrderData.busiPhone;
		if(!phone) {
			Taro.showToast({
				title: "没有电话号码",
				icon: "none"
			})
			return;
		}

		Taro.makePhoneCall({
			phoneNumber: phone
		});
	}

	render() {
		const {
			appointmentStatus,
			preGoodData,
			preOrderData
		} = this.state;

		return (
			<View class="appointment-page u-skeleton">
				<View class="apt-title">{ appointmentStatus }</View>

				<View class="apt-block goods-info">
					<Image class="img" src={preGoodData.img} />

					<View class="info-block">
						<View class="name">
							<View class="product-name">{ preGoodData.good_name }</View>
							{
								preGoodData.buy_amount &&
								<View className="num">x { preGoodData.buy_amount }</View>
							}
						</View>
						{
							preGoodData.good_valid_start && preGoodData.good_valid_end &&
							<View className="date">
								<Text className="sd">{ preGoodData.good_valid_start }</Text>
								<Text className="sep">至</Text>
								<Text className="ed">{ preGoodData.good_valid_end }</Text>
							</View>
						}
						<View className="price">
							<Text className="text-1 text-label">￥</Text>
							{
								preGoodData.actual_amount &&
								<Float value={preGoodData.actual_amount} />
							}
						</View>
					</View>
				</View>

				<View class="apt-block order-info">
					<View class="title">订单信息</View>
					<View class="oi-block">
						<View class="label">开始时间：</View>
						<View class="right">{ preOrderData.begin_time }</View>
					</View>
					<View class="oi-block">
						<View class="label">结束时间：</View>
						<View class="right">{ preOrderData.end_time }</View>
					</View>
					<View class="oi-block">
						<View class="label label-block">
							<View>姓</View>
							<View>名：</View>
						</View>
						<View class="right">{ preOrderData.linkman }</View>
					</View>
					<View class="oi-block">
						<View class="label label-block">
							<View>手</View>
							<View class="ct">机</View>
							<View>号：</View>
						</View>
						<View class="right">{ preOrderData.phone }</View>
					</View>
					<View class="oi-block">
						<View class="label label-block">
							<View>身</View>
							<View class="ct">份</View>
							<View>证：</View>
						</View>
						<View class="right">{ preOrderData.identity_num }</View>
					</View>
				</View>

				<View class="apt-block contact-way">
					<View class="tips">对本订单有疑问或纠纷, 请联系抖音官方客服或商家客服</View>
					<View class="operation">
						<Button onClick={() => this.callOfficalService()}>
							<AtIcon value='icon icon-kefu-01' size='20' customStyle='margin-right: 2px' color='#000'/>
							抖音官方客服
						</Button>
						<Button open-type="contact">
							<AtIcon value='phone' size='20' customStyle='margin-right: 2px' color='#000'/>
							联系商家
						</Button>
					</View>
				</View>
			</View>
		)
	}
}
